<script setup name="Operlog">
import getSearchConfig from './config/searchConfig'
import getContentConfig from './config/contentConfig.js'
import getComputedConfig from '@/hooks/getPageConfig'
import getDialogConfig from './config/dialogConfig'
import { monitorBaseUrl } from '@/api/config/base.js'

const { proxy } = getCurrentInstance()
const { sys_oper_type, sys_common_status } = proxy.useDict(
  'sys_oper_type',
  'sys_common_status'
)
const pageName = 'operlog'
const requestBaseUrl = monitorBaseUrl
const idKey = 'operId'
const showPageSearch = ref(true)
const pageSearchRef = ref(null)
const pageContentRef = ref(null)
const descConfig = ref({})
const tableHideItems = ref([])
const headerButtons = ['refresh', 'delete', 'columnDisplay', 'comSearch']
const dictMap = {
  businessType: sys_oper_type,
  status: sys_common_status,
}
const searchConfig = getSearchConfig()
const searchConfigComputed = computed(() => {
  return getComputedConfig(searchConfig, dictMap)
})
const tableSelected = ref([])
const tableListener = {
  selectionChange: (selected) => {
    tableSelected.value = selected
  },
}
const contentConfig = getContentConfig()
const contentConfigComputed = computed(() => {
  contentConfig.hideItems = tableHideItems
  return contentConfig
})

const dialogConfig = getDialogConfig()

const searchData = computed(() => {
  return pageContentRef.value?.finalSearchData
})

const search = () => {
  pageSearchRef.value?.search()
}

const beforeSend = (queryInfo) => {
  if (queryInfo.dateRange && Array.isArray(queryInfo.dateRange)) {
    const dateRange = queryInfo.dateRange
    queryInfo['params[beginTime]'] = dateRange[0]
    queryInfo['params[endTime]'] = dateRange[1]
    delete queryInfo.dateRange
  }
}

const permission = ref({
  del: 'monitor:operlog:remove',
})

const triggerShowSearch = () => {
  showPageSearch.value = !showPageSearch.value
}

const onChangeShowColumn = (filterArr) => {
  tableHideItems.value = filterArr
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy.download(
    'monitor/operlog/export',
    {
      ...searchData.value,
    },
    `monitor_${new Date().getTime()}.xlsx`
  )
}
const dialogVisible = ref(false)
const viewFormData = ref({})
const handleView = (row) => {
  dialogVisible.value = true
  viewFormData.value = row
}
const handleClose = () => {
  dialogVisible.value = false
  viewFormData.value = {}
}
/** 操作日志类型字典翻译 */
const typeFormat = (row) => {
  return proxy.selectDictLabel(sys_oper_type.value, row.businessType)
}
const init = () => {}

init()
</script>
<template>
  <div class="default-main page">
    <PageSearch
      v-show="showPageSearch"
      ref="pageSearchRef"
      :pageName="pageName"
      :searchConfig="searchConfigComputed"
    ></PageSearch>
    <PageContent
      ref="pageContentRef"
      :pageName="pageName"
      :contentConfig="contentConfigComputed"
      :descConfig="descConfig"
      :showPageSearch="showPageSearch"
      :dictMap="dictMap"
      :tableListener="tableListener"
      :tableSelected="tableSelected"
      :permission="permission"
      :requestBaseUrl="requestBaseUrl"
      :headerButtons="headerButtons"
      :showEdit="false"
      :showDelete="false"
      :idKey="idKey"
      @beforeSend="beforeSend"
      @triggerShowSearch="triggerShowSearch"
      @onChangeShowColumn="onChangeShowColumn"
    >
      <template #handleLeft>
        <el-button
          class="order17 ml12"
          type="warning"
          v-hasPermi="['monitor:operlog:export']"
          @click="handleExport"
        >
          <SvgIcon size="14" iconClass="download" />
          <span class="ml6">导出</span>
        </el-button>
      </template>
      <template #businessTypeSlot="{ backData }">
        <dict-tag :options="sys_oper_type" :value="backData.businessType" />
      </template>
      <template #statusSlot="{ backData }">
        <dict-tag :options="sys_common_status" :value="backData.status" />
      </template>
      <template #todoSlot="{ backData }">
        <el-button
          v-hasPermi="['monitor:operlog:query']"
          type="primary"
          size="small"
          @click="handleView(backData)"
        >
          <SvgIcon size="14" iconClass="eye" />
          <span class="ml6">详情</span>
        </el-button>
      </template>
    </PageContent>
    <el-dialog title="操作日志详细" v-model="dialogVisible" draggable>
      <el-scrollbar max-height="420px">
        <BaseForm :data="viewFormData" v-bind="dialogConfig">
          <template #titleCustom="{ backData }">
            {{ backData.formData.title }} / {{ typeFormat(backData.formData) }}
          </template>
          <template #loginInfoCustom="{ backData }">
            {{ backData.formData.operName }} / {{ backData.formData.operIp }} /
            {{ backData.formData.operLocation }}
          </template>
          <template #statusCustom="{ backData }">
            <div v-if="backData.formData.status === 0">正常</div>
            <div v-else-if="backData.formData.status === 1">失败</div>
          </template>
          <template #costTimeCustom="{ backData }">
            {{ backData.formData.costTime }}毫秒
          </template>
          <template #errorMsgCustom="{ backData }">
            <span v-if="backData.formData.status === 1">
              <span class="errorInfo">异常信息：</span>
              {{ backData.formData.errorMsg }}
            </span>
            <span v-else></span>
          </template>
        </BaseForm>
      </el-scrollbar>
      <template #footer>
        <el-button @click="handleClose">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page {
  :deep(.statusClass .el-radio-group) {
    width: 100%;
    .el-radio {
      margin-right: 16px;
    }
  }
  :deep(.del) {
    margin-left: 12px;
  }
  :deep(.el-dialog__body) {
    padding-bottom: 0;
  }
  :deep(.errorMsgClass) {
    .el-form-item__content {
      margin-left: 20px !important;
    }
  }
}
.errorInfo {
  margin: 0px !important;
  font-weight: 500;
  color: var(--el-text-color-primary);
}
</style>
